<script setup>
import BasicsBar from "../../../components/basicsBar.vue";
import CrosswiseBar from "../../../components/crosswiseBar.vue";
import HalfGauge from "../../../components/halfGauge.vue";
import Pie3D from "../../../components/pie3D.vue";

const barData1 = [
  {
    label: "视频",
    value: 107050,
    sum: 232533,
  },
  {
    label: "图文",
    value: 104816,
    sum: 232533,
  },
  {
    label: "音频",
    value: 4016,
    sum: 232533,
  },
  {
    label: "图片",
    value: 16651,
    sum: 232533,
  },
];

const barData2 = [
  {
    label: "科普",
    value: 6479,
    sum: 19835,
  },
  {
    label: "体育",
    value: 650,
    sum: 19835,
  },
  {
    label: "文艺",
    value: 5234,
    sum: 19835,
  },
  {
    label: "读写",
    value: 7472,
    sum: 19835,
  },
];

const data = [
  {
    name: "未开始",
    value: 5,
  },
  {
    name: "进行中",
    value: 0,
  },
  {
    name: "已结束",
    value: 9,
  },
];

const grid = {
  left: 0,
  bottom: 4,
  top: 3,
  right: 8,
};
const yAxis = {
  axisLabel: {
    show: false,
  },
};

const barSeries = [
  {
    type: "bar",
    name: "申报",
    data: [12497, 11083, 0],
    barWidth: 10,
  },
  {
    type: "bar",
    name: "已准入",
    data: [12497, 11083, 0],
    barWidth: 10,
  },
];

const data1 = [
  {
    name: "三方机构",
    value: 14,
  },
  {
    name: "学校",
    value: 254,
  },
  {
    name: "教师",
    value: 396,
  },
];
</script>

<template>
  <div class="left">
    <div class="title bg1"></div>
    <div class="box1">
      <div class="box1-c1">
        <div class="box1-c1-t">
          <div class="text-c9-75-14">课堂资源总数</div>
          <div>
            <span class="text-gradual-yellow-18 mr-1">232533</span>
            <sapn class="text-opacity-c9-55-12">个</sapn>
          </div>
        </div>
        <div class="box1-c1-c">
          <div class="box1-c1-c-c1">
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">本科</div>
              <div>
                <span class="text-gray-16 mr-2px">62783</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">高职</div>
              <div>
                <span class="text-gray-16 mr-2px">169750</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">研究生</div>
              <div>
                <span class="text-gray-16 mr-2px">0</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="box1-c1-c-c2">
            <div
              class="h-17px flex-shrink-0"
              v-for="(item, index) in barData1"
              :key="index"
            >
              <CrosswiseBar
                :label="item.label"
                :value="item.value"
                :sum="item.sum"
              ></CrosswiseBar>
            </div>
          </div>
        </div>
      </div>
      <div class="box1-c1">
        <div class="box1-c1-t">
          <div class="text-c9-75-14">课后服务资源总数</div>
          <div>
            <span class="text-gradual-yellow-18 mr-1">19835</span>
            <sapn class="text-opacity-c9-55-12">个</sapn>
          </div>
        </div>
        <div class="box1-c1-c">
          <div class="box1-c1-c-c1">
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">本科</div>
              <div>
                <span class="text-gray-16 mr-2px">5355</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">高职</div>
              <div>
                <span class="text-gray-16 mr-2px">14480</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">研究生</div>
              <div>
                <span class="text-gray-16 mr-2px">0</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="box1-c1-c-c2">
            <div
              class="h-17px flex-shrink-0"
              v-for="(item, index) in barData2"
              :key="index"
            >
              <CrosswiseBar
                :label="item.label"
                :value="item.value"
                :sum="item.sum"
              ></CrosswiseBar>
            </div>
          </div>
        </div>
      </div>
      <div class="box1-c1">
        <div class="box1-c1-t">
          <div class="text-c9-75-14">在线名师课程总数</div>
          <div>
            <span class="text-gradual-yellow-18 mr-1">51</span>
            <sapn class="text-opacity-c9-55-12">个</sapn>
          </div>
        </div>
        <div class="box1-c1-c">
          <div class="box1-c1-c-c1">
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">本科</div>
              <div>
                <span class="text-gray-16 mr-2px">46</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">高职</div>
              <div>
                <span class="text-gray-16 mr-2px">5</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">研究生</div>
              <div>
                <span class="text-gray-16 mr-2px">0</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="flex-1">
            <Pie3D
              :data="data"
              :grid="{ left: '-20%', top: '-10%' }"
              :legend="{ itemGap: 10, right: '2%', top: '20%' }"
            ></Pie3D>
          </div>
        </div>
      </div>
      <div class="box1-c1">
        <div class="box1-c1-t">
          <div class="text-c9-75-14">教师备课资源总数</div>
          <div>
            <span class="text-gradual-yellow-18 mr-1">216</span>
            <sapn class="text-opacity-c9-55-12">个</sapn>
          </div>
        </div>
        <div class="box1-c1-c">
          <div class="box1-c1-c-c1">
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">本科</div>
              <div>
                <span class="text-gray-16 mr-2px">58</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">高职</div>
              <div>
                <span class="text-gray-16 mr-2px">158</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box1-c1-c-c1-c">
              <div class="text-c9-65-12">研究生</div>
              <div>
                <span class="text-gray-16 mr-2px">0</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="flex-1 flex">
            <div class="flex-1">
              <HalfGauge
                label="已使用"
                subLabel="193"
                :value="193"
                :sum="216"
                color="#2D80FF"
              ></HalfGauge>
            </div>
            <div class="flex-1">
              <HalfGauge
                label="未使用"
                subLabel="20"
                :value="20"
                :sum="216"
                color="#FEDE73"
              ></HalfGauge>
            </div>
          </div>
        </div>
      </div>
      <div class="box1-c2">
        <div class="box1-c2-c">
          <div class="box1-c2-c-c">
            <img
              src="../../../assets/images/icon11.png"
              class="box1-c2-c-c-i"
            />
            <div class="text-c9-65-14">已入驻学校总数</div>
          </div>
          <div class="box1-c2-c-c">
            <div class="text-gradual-blue-18">4716</div>
            <div class="text-opacity-c9-55-12">个</div>
          </div>
        </div>
        <div class="box1-c2-c">
          <div class="box1-c2-c-c">
            <img
              src="../../../assets/images/icon12.png"
              class="box1-c2-c-c-i"
            />
            <div class="text-c9-65-14">已认定机构总数</div>
          </div>
          <div class="box1-c2-c-c">
            <div class="text-gradual-blue-18">664</div>
            <div class="text-opacity-c9-55-12">个</div>
          </div>
        </div>
      </div>
    </div>
    <div class="title bg2"></div>
    <div class="box2">
      <div class="box2-c1">
        <div class="text-c9-75-14 h-14px">迁移纳管资源 (个)</div>
        <div class="box2-c1-c">
          <diV class="box2-c1-c-c">
            <div class="box2-c1-c-c-c1">
              <div class="text-c9-55-14">迁移资源数</div>
              <div>
                <span class="text-gradual-yellow-18 mr-1">1918</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box2-c1-c-c-c2">
              <div class="text-c9-55-12">本科</div>
              <div>
                <span class="text-gray-16 mr-1">1057</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box2-c1-c-c-c2">
              <div class="text-c9-55-12">高职</div>
              <div>
                <span class="text-gray-16 mr-1">861</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box2-c1-c-c-c2">
              <div class="text-c9-55-12">研究生</div>
              <div>
                <span class="text-gray-16 mr-1">0</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
          </diV>
          <div class="line-col"></div>
          <diV class="box2-c1-c-c">
            <div class="box2-c1-c-c-c1">
              <div class="text-c9-55-14">纳管资源数</div>
              <div>
                <span class="text-gradual-yellow-18 mr-1">488897</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box2-c1-c-c-c2">
              <div class="text-c9-55-12">本科</div>
              <div>
                <span class="text-gray-16 mr-1">132002</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box2-c1-c-c-c2">
              <div class="text-c9-55-12">高职</div>
              <div>
                <span class="text-gray-16 mr-1">356895</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
            <div class="box2-c1-c-c-c2">
              <div class="text-c9-55-12">研究生</div>
              <div>
                <span class="text-gray-16 mr-1">0</span>
                <span class="text-opacity-c9-55-12">个</span>
              </div>
            </div>
          </diV>
        </div>
      </div>
      <div class="box2-c2">
        <div class="box2-c2-c">
          <div class="text-c9-75-14 leading-14px">征集资源 (个)</div>
          <div class="box2-c2-c-c">
            <div class="text-c9-55-14">在线申报资源数</div>
            <div class="flex items-center">
              <sapn class="text-gradual-yellow-18 mr-1">23580</sapn>
              <span class="text-opacity-c9-55-12">个</span>
            </div>
          </div>
          <div class="box2-c2-c-c">
            <div class="text-c9-75-12">其中已准入在线资源数</div>
            <div class="flex items-center">
              <sapn class="text-gradual-blue-14 mr-1">23580</sapn>
              <span class="text-opacity-c9-55-12">个</span>
            </div>
          </div>
          <div class="box2-c2-c-c1">
            <CrosswiseBar
              :value="100"
              :grid="grid"
              :yAxis="yAxis"
            ></CrosswiseBar>
          </div>
          <div class="text-opacity-c9-55-12 flex">准入率:100%</div>
        </div>
        <div class="flex-1">
          <BasicsBar
            :xData="['本科', '高职', '研究生']"
            :series="barSeries"
            :color="['#2D80FF', '#6ECC84']"
          ></BasicsBar>
        </div>
      </div>
      <div class="box2-c3">
        <div class="box2-c3-c">
          <div class="text-c9-75-14 leading-14px">申请人资格认定</div>
          <div class="box2-c3-c-c">
            <div class="text-c9-55-14">资格认定申请人</div>
            <div class="flex items-center">
              <sapn class="text-gradual-yellow-18 mr-1">664</sapn>
              <span class="text-opacity-c9-55-12">人</span>
            </div>
          </div>
          <div class="box2-c3-c-c">
            <div class="text-c9-75-12 flex items-center gap-1">
              <div class="box2-c3-c-c-line"></div>
              已认定申请人
            </div>
            <div class="flex items-center">
              <sapn class="text-gradual-blue-14 mr-1">664</sapn>
              <span class="text-opacity-c9-55-12">人</span>
            </div>
          </div>
        </div>
        <div class="flex-1">
          <Pie3D
            :data="data1"
            :legend="{
              top: 0,
              right: 0,
              itemGap: 9,
            }"
            :grid="{
              top: '-15%',
              left: '-24%',
            }"
          ></Pie3D>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 2.75rem;
  }
  .bg1 {
    background: url(../../../assets/images/title1.png) no-repeat;
    background-size: 100% 100%;
  }
  .bg2 {
    background: url(../../../assets/images/title2.png) no-repeat;
    background-size: 100% 100%;
  }

  .box1 {
    width: 100%;
    height: 32.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
    .box1-c1 {
      width: 100%;
      height: 7.0625rem;
      background: rgba(9, 54, 100, 0.3);
      display: flex;
      flex-direction: column;
      .box1-c1-t {
        width: 100%;
        height: 34px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.625rem 0.75rem 0.375rem;
      }
      .box1-c1-c {
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0 0 0.625rem 0.75rem;
        overflow: hidden;
        .box1-c1-c-c1 {
          width: 8.5625rem;
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          .box1-c1-c-c1-c {
            width: 100%;
            height: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: url(../../../assets/images/subTitle.png) no-repeat;
            background-size: 5.75rem 100%;
            padding-left: 0.5rem;
          }
        }
        .box1-c1-c-c2 {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          overflow-y: auto;
        }
      }
    }
    .box1-c2 {
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0 0.75rem;
      .box1-c2-c {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .box1-c2-c-c {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          .box1-c2-c-c-i {
            width: 1.5rem;
            height: 1.5rem;
          }
        }
      }
    }
  }

  .box2 {
    flex: 1;
    height: 100%;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    .box2-c1 {
      width: 100%;
      height: 8.125rem;
      background: rgba(9, 54, 100, 0.3);
      padding: 0.75rem 0.75rem 0;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      .box2-c1-c {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        .box2-c1-c-c {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          .box2-c1-c-c-c1 {
            // flex: 1;
            width: 100%;
            height: 1.125rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .box2-c1-c-c-c2 {
            width: 100%;
            height: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 0.5rem;
            background: url(../../../assets/images/subTitle.png) no-repeat;
            background-size: 6rem 100%;
          }
        }
      }
    }
    .box2-c2 {
      width: 100%;
      height: 7.125rem;
      background: rgba(9, 54, 100, 0.3);
      display: flex;
      gap: 1.5rem;
      padding: 12px 12px 10px;
      .box2-c2-c {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        .box2-c2-c-c {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .box2-c2-c-c1 {
          width: 100%;
          height: 12px;
        }
      }
    }
    .box2-c3 {
      width: 100%;
      flex: 1;
      background: rgba(9, 54, 100, 0.3);
      display: flex;
      gap: 1.5rem;
      padding: 12px 12px 10px;
      .box2-c3-c {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        .box2-c3-c-c {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .box2-c3-c-c-line {
            width: 0.125rem;
            height: 0.75rem;
            background: url(../../../assets/images/line.png) no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
